<!---->
<template>
  <div class="dashboard-container">
    <el-button type="primary" @click="saveAdminPop=true">创建子账号</el-button>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      style="margin-top: 20px;"
    >
      <el-table-column align="center" label="ID" prop="id" />
      <el-table-column align="center" label="名称" prop="name" />
      <el-table-column align="center" label="等级">
        <template slot-scope="scope">{{scope.group == 1 ? "管理员" : "销售员"}}</template>
      </el-table-column>
      <el-table-column align="center" label="创建时间" prop="edit_time" />
      <el-table-column align="center" label="最后登录时间" prop="last_login_time" />
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <!-- <el-button type="text" @click="getAdmin(scope.row.id)" size="small">查看</el-button>
          <el-button type="text" @click="handleClick(scope.row)" size="small">编辑</el-button> -->
          <el-button type="text" @click="adminDel(scope.row)" size="small">删除</el-button>
          <el-button type="text"  @click="setadminstatus(scope.row)" size="small" v-if="scope.row.group == 2">{{scope.row.dimission == 0 ? "启用":"禁用"}}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="创建子账号" :visible.sync="saveAdminPop" width="400px">
      <el-form :model="saveAdminForm" ref="saveAdminForm" :rules="saveAdminRules" label-width="80px">
        <el-form-item label="账号" prop="name">
          <el-input v-model="saveAdminForm.name"  placeholder="请输入账号名" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pws">
          <el-input v-model="saveAdminForm.pws" placeholder="请输入密码" autocomplete="off" show-password></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input v-model="saveAdminForm.phone" maxlength="11" placeholder="请输入手机号码" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="saveAdminPop = false">取 消</el-button>
        <el-button type="primary" @click="saveAdmin">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="setadminstatusForm.name" :visible.sync="setadminstatusPop" width="400px">
      <el-form :model="setadminstatusForm" ref="setadminstatusForm" label-width="90px">
        <el-form-item label="对此账号：">
          <el-radio v-model="setadminstatusForm.dimission" label="0">禁用</el-radio>
          <el-radio v-model="setadminstatusForm.dimission" label="1">启用</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="setadminstatusPop = false">取 消</el-button>
        <el-button type="primary" @click="setadminstatus">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getList, adminDel, saveAdmin, getAdmin, setadminstatus } from "@/api/user";
import pagination from "@/components/page/page.vue"; //分页
import { validPhone } from '@/utils/validate'
export default {
  data() {
    return {
      listLoading: true,
      list: [],
      saveAdminPop: false,
      saveAdminForm: {
        name:'',
        pws:'',
        phone:''
      },
      setadminstatusPop:false,
      saveAdminRules:{
        name: [
            { required: true, message: '请输入账号名', trigger: 'blur' }
          ],
        pws:[
            { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        phone:[
            { required: true, message: '请输入手机号码', trigger: 'blur', validator:validPhone}
        ]
      },
      setadminstatusForm:{}
    };
  },
  components: {
    pagination
  },
  computed: {},
  mounted() {
    this.getList();
  },
  methods: {
    //获取
    getList() {
      getList().then(res => {
        this.list = res.data;
        this.listLoading = false;
      });
    },
    handleClick(row) {
      console.log(row);
    },
    //查看管理员信息
    getAdmin(id){
      getAdmin({id}).then()
    },
    //删除
    adminDel(row) {
      adminDel({ id: row.id }).then(res => {
        this.$message({
          message: "删除成功",
          type: "success"
        });
      });
    },
    //禁用或启用
    setadminstatus(row){
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.setadminstatusForm={
        id:row.id,
        name:row.name,
        dimission:row.dimission == 0 ? 1 : 0
      }
      setadminstatus(this.setadminstatusForm).then(res =>{
        this.$message({
          message: res.msg,
          type: res.state
        });
        this.getList();//更新数据
        loading.close();
      })
    },
    saveAdmin() {
      this.$refs.saveAdminForm.validate(valid => {
        if (valid) {
          saveAdmin(this.saveAdminForm).then(res =>{
            this.$message({
              message: res.msg,
              type: res.state
            });
            this.saveAdminPop = false
            this.getList();//更新数据
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
};
</script>
<style lang='scss' scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>